/*
 * @Author: zhenhua.liu 
 * @Date: 2017-12-12 13:41:33 
 * @Last Modified by: zhenhua.liu
 * @Last Modified time: 2017-12-12 13:52:13
 */

/*
*   在angular内使用  ng-class='{moduleBox:true/false}'
*   在vue 内使用  :class='moduleBox:true/false{}'
*   在一般的html 内使用，就直接class='moduleBox'
*
* 知识点：transform: translate(-50%,-50%) 配合position absolute 垂直居中  !注意兼容
*        animation-duration: 0.3s   animation动画时间
*        animation-name: fadeInDown  animation动画名字
*        @keyframes   设置分断动画
*
 */
.moduleBox{
  box-sizing: border-box;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  /* height: 80%; */
  max-height: 90%;
  padding: 0px 25px 30px 25px;
  border-radius: 8px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%,-50%);
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  overflow: auto;
}
@-webkit-keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}

100% {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
}

@keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}

100% {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
}